<body>
	<div id="page">
		<div data-role="page" id="cusmain">
			<div data-role="header" class="cusmainheader" data-theme="e">
				<a href="#menuPopup" data-type="button" data-rel="popup"
					data-icon="bars" data-iconpos="notext" data-position-to="left">Menu</a>
				<div data-role="popup" id="menuPopup" data-transition="turn"
					data-shadow="false" data-corners="false" data-tolerance="0,0">
					<a href="#" data-rel="back" data-role="button" data-icon="delete"
						data-iconpos="notext" class="ui-btn-right">close</a>
					<ul data-role="listview" data-inset="true" data-corners="false">
						<li data-role="list-divider">
							<h1>Menu</h1>
						</li>
						<li><a id="curOrdersLink">Current Orders</a></li>
						<li><a id="orderHistLink">Order History</a></li>
						<li><a id="myCreditLink">My Credit</a></li>
						<li><a id="logOut">Log Out</a></li>

					</ul>
				</div>
				<h1>Smart Taxi</h1>
				<!--  	<a href="#" id="main-info-btn" data-typr="button" data-icon="grid" data-iconpos="notext">info</a> -->
			</div>
			<!-- end cusmain header -->
			
			<!-- header for order a driver -->
	<div data-role="header" data-theme="e" class="orderTaxi" >
		<a href="#" data-type="button" id="backToCusmain" data-icon="arrow-l" data-iconpos="left" data-position-to="left">Back</a>
		<h1>Smart Taxi</h1>
	</div>
	
	<div class="responseheader">
	<div id="driverInfo">
	<div style="float:left"><img id="driphoto" src="../images/defaultPhoto.png" width="60px" height="75px"/></div>
	<div style="float:left"><table>
	<tr><td class="col1"><h3 id="name"></h3></td>
	<tr><td class="col1">Credit: <span id="credit"></span></tr>
	<tr><td class="col1">License: <span id="license"></span></td></tr>
	<tr><td class="col1">Car Color: <span id="color"></span></td></tr>				
	</table></div>			
	<div style="float:right"><a><img src="../images/mic_w.ico" height="75px" width="70px" id="microphoto" data-state="stop"/></a></div>
	<p style="clear: both;"></p>
	</div><!-- end driverInfo -->
	</div><!-- end responseheader -->
	
	
	<div class="orderTaxi" id="orderInputs">
	<table>
			<tr><td class="orderFormCol1"><span class="whiteText">Time:</span></td><td class="orderFormCol2"><input type="text" name="setupTime" id="slider_example_3" class="pencil-input" data-clear-btn="true" placeholder="Please input setup time"/></td></tr>
			<tr><td class="orderFormCol1"><span class="whiteText">From:</span></td><td class="orderFormCol2"><input id="fromAddr" type="text" placeholder="Please input start address" class="pencil-input" data-clear-btn="true"/></td></tr>
			<tr><td class="orderFormCol1"><span class="whiteText">To:</span></td><td class="orderFormCol2"><input id="toAddr" type="text" placeholder="Please input end address" class="pencil-input" data-clear-btn="true"/></td></tr>
	</table>
	</div><!-- end orderInputs -->
	
	<div data-role="content"> 
			<div id="mapContainer" class="custMainMap"></div>
	</div>
	
	<div align="center" id="radioBackground" class="dispOptions">
		<div class="whitespace"></div>
		<fieldset id ="custMainRadio" data-type="horizontal" data-role="controlgroup" data-mini="true">
			<input type="radio" name="options" data-theme="a" id="fastResponse" value="0" checked="checked"/>
			<label for="fastResponse">Fastest Reply</label>
			<input type="radio" name="options" data-theme="a" id="closest" value="1"/>
			<label for="closest">Closest Taxi</label>
			<input type="radio" name="options" data-theme="a" id="highest" value="2"/>
			<label for="highest">Highest Credit</label>
		</fieldset>
	</div>	
	
	<div align="center" class="footer">
		<div class="cusmain">

			<a data-role="button" id="bookNowBtn" data-theme="e" data-inline="true" class="mainBtn">Book Now</a> 
				<a href="#" data-role="button" id="orderTaxiBtn" data-theme="e" data-inline="true" class="mainBtn">Order Taxi</a>
		</div>
		<div class="response">
				<a href="#" data-role="button" id="acceptBtn" data-theme="e" data-inline="true" class="mainBtn">Accept</a> 
				<a href="#orderPopup" data-rel="popup" data-role="button" id="refuseBtn" data-theme="e" data-inline="true" class="mainBtn">Refuse</a>
		</div>
		<div class="orderTaxi submitButton">
				<a href="#" id="submitBtn" data-role="button" data-inline="true" data-theme="e" class="mainBtn">Submit</a> 
		</div>
	</div>
	
	<div data-role="popup" id="noOrderPopup" data-position-to="window">
		<div data-role="header"><h1>In Progress</h1></div>
		<div data-role="content">
			<p>Your current order is still in progress.</p>
			<a data-role="button" id="noOrderBtn" data-rel="back">OK</a>
		</div>
	</div>
	
	<div data-role="popup" id="orderPopup"  data-overlay-theme="a" data-theme="c" data-position-to="window" style="width:250px">
		<div data-role="header"><h1>Order Reply</h1></div>
		<div data-role="content">
					<div>
					<table>
						<tr>
							<td><h3 id="namePopup"></h3></td>
						</tr>
						<tr>
							<td>Credit: <span id="creditPopup"></span>
						</tr>
						<tr>
							<td>License: <span id="licensePopup"></span></td>
						</tr>
						<tr>
							<td>Car Color: <span id="colorPopup"></span></td>
						</tr>
					</table>
					</div>
					<hr>
					<div>
					<table>
						<tr>
							<td>Time: <span id="timePopup"></span></td>
						</tr>
						<tr>
							<td>From: <span id="fromAddrPopup"></span></td>
						</tr>
						<tr>
							<td>To: <span id="toAddrPopup"></span></td>
						</tr>
					</table>
					</div>
				<hr>
				handle it ?
					<div>
					<a data-role="button" style="width: 100px; float: left;" id="handleNowBtn">
						<span class="ui-btn-text">now</span>
					</a>
					<a data-role="button" style="width: 100px; float: right;" id="handleLaterBtn">
						<span class="ui-btn-text">later</span>
					</a>
					<p style="clear: both"></p>
					</div>
					
			</div>
	</div>

			<div id="voicecontainer" class="hidden">
				<a data-role="button" id="moreBtn"> <span class="ui-btn-text">More</span>
				</a>
				<div id="recordHistory"></div>
				<a data-role="button" data-status="stop" id="voiceBtn"> <span
					class="ui-btn-text">Voice</span>
				</a>
			</div>


			<link rel="stylesheet" type="text/css" href="../css/jquery-ui.css" />
				<link rel="stylesheet" type="text/css" href="../css/jquery-ui-timepicker-addon.css" />

			<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
			<script type="text/javascript"
				src="../js/jquery-ui-timepicker-addon.js"></script>
			<script type="text/javascript" src="../js/jquery-ui-sliderAccess.js"></script>
			<script>
				$('#tabs').tabs();
				$('.example-container > pre').each(function(i) {
					eval($(this).text());
				});

				$('#slider_example_3').datetimepicker({
					addSliderAccess : true,
					sliderAccessArgs : {
						touchonly : false
					}
				});
			</script>

			 <script src="../js/loadmap.js"></script> 
			<script src="../js/customer-main.js"></script>
<!-- 			<script src="../js/infobox.js"></script> -->
		</div>
		<!-- end cusmain -->
	</div>
	<!-- end page -->
</body>

